import React, { useEffect, useState } from 'react';
import { Button, Col, Drawer, Form, Input, Row, Select, message, InputNumber, Switch } from 'antd';
import { FormComponentProps } from 'antd/lib/form';
import { WorkorderItem } from '@/pages/device/protocol/data';
import apis from '@/services';
import Img from './img';
import imgplus from './imgPlus.png';
import encodeQueryParam from '@/utils/encodeParam';

interface Props extends FormComponentProps {
  close: Function;
  save: Function;
  data: Partial<WorkorderItem>;
}

interface State {
  data: Partial<WorkorderItem>;
  instanceList: any[];
  productList: any[];
  propertiesList: any[];
  propertiesArr: any[];
  unitsList: any[];
  imgVisible: boolean;
  issue: boolean;
  imgId?: string;
  imgUrl?: string;
  productId?: string;
  identification?: number;
  sumCount?: number;
}

const Save: React.FC<Props> = props => {
  const {
    form: { getFieldDecorator, setFieldsValue },
    form,
  } = props;

  const initState: State = {
    data: props.data,
    instanceList: [],
    productList: [],
    propertiesList: [],
    propertiesArr: [],
    unitsList: [],
    imgVisible: false,
    issue: false,
    imgUrl: '',
    imgId: '',
    productId: '',
    identification: 1,   // 0代表剪切机，1代表弯曲机
    sumCount: 0,   
  };

  const [data, setData] = useState(initState.data);
  const [instanceList, setInstanceList] = useState(initState.instanceList);
  const [productList, setProductList] = useState(initState.productList);
  const [imgVisible, setImgVisible] = useState(initState.imgVisible);
  const [issue, setIssue] = useState(initState.issue);
  const [propertiesList, setPropertiesList] = useState(initState.propertiesList);
  const [propertiesArr, setPropertiesArr] = useState(initState.propertiesArr);
  const [unitsList, setUnitsList] = useState(initState.unitsList);
  const [imgUrl, setImgUrl] = useState(initState.imgUrl);
  const [imgId, setImgId] = useState(initState.imgId);
  const [productId, setProductId] = useState(initState.productId);
  const [identification, setIdentification] = useState(initState.identification);
  const [sumCount, setSumCount] = useState(initState.sumCount);
  const submitData = () => {
    //编辑
    if(props.data?.id){
      form.validateFields((err, fileValue) => {
        if (err) return;
        console.log('identification',identification)
        if(!imgUrl && identification == 0){ 
          message.error("请选择图片");
          return
        }
        const params = {}
        params['deviceId'] = fileValue.deviceId
        delete fileValue.deviceId
        params['orderName'] = fileValue.orderName
        delete fileValue.orderName
        params['state'] = 0
        params['imgId'] = imgId
        if(identification == 0){
          params['imgUrl'] = imgUrl
        }
        params['orderData'] = fileValue
        params['productId'] = productId
        console.log('fileValue',params)
        if(props.data?.id){
          params['id'] = props.data?.id
        }
        apis.workorder.update(params).then(res => {
          if (res.status === 200) {
            message.success("修改工单成功");
            props.save()
          }
        })
      })
    }else{
      //新建
      form.validateFields((err, fileValue) => {
        if (err) return;
        if(!imgUrl && identification == 0){ 
          message.error("请选择图片");
          return
        }
        const params = {}
        params['deviceId'] = fileValue.deviceId
        delete fileValue.deviceId
        params['orderName'] = fileValue.orderName
        delete fileValue.orderName
        params['state'] = 0
        params['imgId'] = imgId
        params['imgUrl'] = imgUrl
        params['orderData'] = fileValue
        params['productId'] = productId
        console.log('fileValue',params)
        apis.workorder.save(params).then(res => {
          if (res.status === 200) {
            message.success("创建工单成功");
            props.save()
          }
        })
      })
    }

  }
  // 是否选择默认100组工单下发选择
  const onChangeSwitch = (value: boolean) =>{
    setIssue(value)
  }
  //创建工单并下发
  const submitDataSend = () => {
    form.validateFields((err, fileValue) => {
      if (err) return;
      if(!imgUrl && identification == 0){ 
        message.error("请选择图片");
        return
      }
      const params = {}
      params['deviceId'] = fileValue.deviceId
      delete fileValue.deviceId
      params['orderName'] = fileValue.orderName
      delete fileValue.orderName
      params['state'] = 0
      params['imgId'] = imgId
      params['imgUrl'] = imgUrl
      params['orderData'] = fileValue
      params['issue'] = issue
      console.log('fileValue',params)
      apis.workorder.saveSend(params).then(res => {
        if (res.status === 200) {
          message.success("创建工单并下发成功");
          props.save()
        }
      })
    })
  }
  // 图片发生改变
  const imgChange = (value: any[]) => {
    setImgId(value.id)
    setImgUrl(value.imgUrl)
  }
  // 获取单位的list
  const getUnitsList = () =>{
    apis.workorder.getUnitsList().then((response: any) => {
      if (response.status === 200) {
        setUnitsList(response.result)
        console.log('getUnitsList',unitsList)
      }      
    })
  }
  // 设备id发生改变
  const handleChange = (value: String) => {
    console.log(value)
    apis.deviceInstance.info(value).then((response: any) => {
      const properties = JSON.parse(response.result.metadata).properties

      console.log('properties',properties)
      var propertyList = []
      var propertyArr = []
      properties.map((item: any, index: number) => {
        console.log('item.id.substr(item.id.length-1,3)', item.id.substr(item.id.length-1,3))
        if(item.id.substr(item.id.length-3,3) == '_gd'){
          propertyList.push(item)
        }
      })
      console.log(properties)
      let newArr = propertyList.filter(item => item.id == 'raw_material_gd')
      console.log('newArr',newArr)
      if(newArr.length){
        propertyArr = JSON.parse(JSON.stringify(propertyList))
        setIdentification(1)
        // 循环后台返回的物模型
      }else{
        propertyList.map((item: any, index: number) => {
          if(item.id == 'device_state' || item.id == 'work_order_id' || item.id == 'order_state' || item.id == 'bar_diam_gd' 
          || item.id == 'bar_level_gd' || item.id == 'set_num_gd' || item.id == 'finish_num' || item.id == 'total_length_gd' 
          || item.id == 'total_weight_gd' || item.id == 'length_single_gd' || item.id == 'weight_gd' || item.id == 'length_middle_gd' 
          || item.id == 'angle_lf0_gd' || item.id == 'angle_rt0_gd' || item.id == 'length_lf1_gd' || item.id == 'length_rt1_gd' 
          || item.id == 'angle_lf1_gd' || item.id == 'angle_rt1_gd' ){
            propertyArr.push(item)
          }
          setSumCount(1)
        })
        setIdentification(0)
      }
      setPropertiesList(propertyList)
      setPropertiesArr(propertyArr)
    })
    //获取指定设备上一次创建的工单信息
    apis.workorder.getLast(value).then((response: any) => {
      if (response.status === 200) {
        const orderData = {orderData: response.result.orderData}
        setData(orderData)
      }
    })

  }
  // 产品id发生改变
  const handleChangeProduct = (value: String) => {
    console.log('form',form)
    setProductId(value)
    form.setFieldsValue({deviceId: ''})
    //获取设备下拉框数据
    apis.workorder.instanceNopaging(encodeQueryParam({ terms: {productId: value}})).then(res => {
      if (res.status === 200) {
        setInstanceList(res.result);
      }
    })
    setPropertiesArr([])
  }
  // 点击添加按钮添加 
  const clickPlus = (sumCount: number) => {
    console.log('sumCount',sumCount)
    if(sumCount < 7){
      if(sumCount == 1){
        let arr = propertiesList.filter(item => (item.id == 'length_lf2_gd' || item.id == 'length_rt2_gd' || item.id == 'angle_lf2_gd' || item.id == 'angle_rt2_gd'))
        let listArr = propertiesArr.concat(arr)
        setPropertiesArr(listArr)
      }else if(sumCount == 2){
        let arr1 = propertiesList.filter(item => (item.id == 'length_lf3_gd' || item.id == 'length_rt3_gd' || item.id == 'angle_lf3_gd' || item.id == 'angle_rt3_gd'))
        let listArr1 = propertiesArr.concat(arr1)
        setPropertiesArr(listArr1)
      }else if(sumCount == 3){
        let arr2 = propertiesList.filter(item => (item.id == 'length_lf4_gd' || item.id == 'length_rt4_gd' || item.id == 'angle_lf4_gd' || item.id == 'angle_rt4_gd'))
        let listArr2 = propertiesArr.concat(arr2)
        setPropertiesArr(listArr2)
      }else if(sumCount == 4){
        let arr3 = propertiesList.filter(item => (item.id == 'length_lf5_gd' || item.id == 'length_rt5_gd' || item.id == 'angle_lf5_gd' || item.id == 'angle_rt5_gd'))
        let listArr3 = propertiesArr.concat(arr3)
        setPropertiesArr(listArr3)
      }else if(sumCount == 5){
        let arr4 = propertiesList.filter(item => (item.id == 'length_lf6_gd' || item.id == 'length_rt6_gd' || item.id == 'angle_lf6_gd' || item.id == 'angle_rt6_gd'))
        let listArr4 = propertiesArr.concat(arr4)
        setPropertiesArr(listArr4)
      }else if(sumCount == 6){
        let arr5 = propertiesList.filter(item => (item.id == 'length_lf7_gd' || item.id == 'length_rt7_gd' || item.id == 'angle_lf7_gd' || item.id == 'angle_rt7_gd'))
        let listArr5 = propertiesArr.concat(arr5)
        setPropertiesArr(listArr5)
      }
      setSumCount(sumCount+1)
    }
  }
  // 文本框发生变化时触发
  const onChangeInput = (value: String) => {
    console.log('form',value)
    form.validateFields((err, fileValue) => {
      console.log('fileValue',fileValue)
      console.log('form',form)
      // 弯曲机
      if(identification == 0){
        let keys = []
        keys =  Object.keys(fileValue)
        console.log('keys',keys)
        let key = []
        for(let i = 0; i < keys.length; i++){
          if(keys[i].includes('length_lf') || keys[i].includes('length_rt') || keys[i] == 'length_middle_gd'){
            key.push(keys[i])
          }
        }
        // 长度
        let su = 0
        if(key.length){
          for(let y = 0; y < key.length; y++){
            let count = parseInt(fileValue[key[y]]) || 0
            su = count + su
          }
        }
        let sum = su / 1000
        // 单个工件的长度
        form.setFieldsValue({length_single_gd: sum.toFixed(4)})
        // 单个共检的重量
        let weight = 0
        let barDiamGd = parseInt(fileValue['bar_diam_gd']) || 0
        if(barDiamGd == 6){
          weight = sum * 0.222
          let num = weight.toFixed(4)
          form.setFieldsValue({weight_gd: num})
        }else if(barDiamGd == 8){
          weight = sum * 0.395
          let num = weight.toFixed(4)
          form.setFieldsValue({weight_gd: num})
        }else if(barDiamGd == 10){
          weight = sum * 0.6169
          let num = weight.toFixed(4)
          form.setFieldsValue({weight_gd: num})
        }else if(barDiamGd == 12){
          weight = sum * 0.888
          let num = weight.toFixed(4)
          form.setFieldsValue({weight_gd: num})
        }else if(barDiamGd == 14){
          weight = sum * 1.21
          let num = weight.toFixed(4)
          form.setFieldsValue({weight_gd: num})
        }else if(barDiamGd == 16){
          weight = sum * 1.58
          let num = weight.toFixed(4)
          form.setFieldsValue({weight_gd: num})
        }else if(barDiamGd == 18){
          weight = sum * 2.0
          let num = weight.toFixed(4)
          form.setFieldsValue({weight_gd: num})
        }else if(barDiamGd == 20){
          weight = sum * 2.47
          let num = weight.toFixed(4)
          form.setFieldsValue({weight_gd: num})
        }else if(barDiamGd == 22){
          weight = sum * 2.98
          let num = weight.toFixed(4)
          form.setFieldsValue({weight_gd: num})
        }else if(barDiamGd == 25){
          weight = sum * 3.85
          let num = weight.toFixed(4)
          form.setFieldsValue({weight_gd: num})
        }else if(barDiamGd == 28){
          weight = sum * 4.83
          let num = weight.toFixed(4)
          form.setFieldsValue({weight_gd: num})
        }else if(barDiamGd == 32){
          weight = sum * 6.31
          let num = weight.toFixed(4)
          form.setFieldsValue({weight_gd: num})
        }else if(barDiamGd == 36){
          weight = sum * 7.99
          let num = weight.toFixed(4)
          form.setFieldsValue({weight_gd: num})
        }else if(barDiamGd == 40){
          weight = sum * 9.87
          let num = weight.toFixed(4)
          form.setFieldsValue({weight_gd: num})
        }else{
          message.warning("请输入正确的钢筋直径：6、8、10、12、14、16、18、20、22、25、28、32、36、40");
        }
        // 总长度
        let length_single_gd = sum
        let set_num_gd = parseInt(fileValue['set_num_gd']) || 0
        let total_length = length_single_gd * set_num_gd
        form.setFieldsValue({total_length_gd: total_length.toFixed(4)})
        //总重量
        let total_weight = weight * set_num_gd / 1000
        form.setFieldsValue({total_weight_gd: total_weight.toFixed(4)})
      }else{
        let keys = []
        keys =  Object.keys(fileValue)
        console.log('keys',keys)
        let key = []
        for(let i = 0; i < keys.length; i++){
          if(keys[i].includes('length') && keys[i] !== 'total_length_gd'){
            key.push(keys[i])
          }
        }
        // 长度
        let su = 0
        if(key.length){
          for(let y = 0; y < key.length; y++){
            let count = parseInt(fileValue[key[y]]) || 0
            su = count + su
          }
        }
        let summ = su / 1000
        // 单个工件的总长度
        form.setFieldsValue({total_length_gd: summ.toFixed(4)})
        // 单个共检的重量
        let weight = 0
        let barDiamGd = parseInt(fileValue['bar_diam_gd']) || 0
        console.log('barDiamGd',barDiamGd)
        let raw_material = parseInt(fileValue['raw_material_gd']) || 0
        let set_num_gd = parseInt(fileValue['set_num_gd']) || 0
        let sum = raw_material * set_num_gd  / 1000
        if(barDiamGd == 6){
          weight = sum * 0.222 / 1000
          let num = weight.toFixed(4)
          form.setFieldsValue({total_weight_gd: num})
        }else if(barDiamGd == 8){
          weight = sum * 0.395 / 1000
          let num = weight.toFixed(4)
          form.setFieldsValue({total_weight_gd: num})
        }else if(barDiamGd == 10){
          weight = sum * 0.6169 / 1000
          let num = weight.toFixed(4)
          form.setFieldsValue({total_weight_gd: num})
        }else if(barDiamGd == 12){
          weight = sum * 0.888 / 1000
          let num = weight.toFixed(4)
          form.setFieldsValue({total_weight_gd: num})
        }else if(barDiamGd == 14){
          weight = sum * 1.21 / 1000
          let num = weight.toFixed(4)
          form.setFieldsValue({total_weight_gd: num})
        }else if(barDiamGd == 16){
          weight = sum * 1.58 / 1000
          let num = weight.toFixed(4)
          form.setFieldsValue({total_weight_gd: num})
        }else if(barDiamGd == 18){
          weight = sum * 2.0 / 1000
          let num = weight.toFixed(4)
          form.setFieldsValue({total_weight_gd: num})
        }else if(barDiamGd == 20){
          weight = sum * 2.47 / 1000
          let num = weight.toFixed(4)
          form.setFieldsValue({total_weight_gd: num})
        }else if(barDiamGd == 22){
          weight = sum * 2.98 / 1000
          let num = weight.toFixed(4)
          form.setFieldsValue({total_weight_gd: num})
        }else if(barDiamGd == 25){
          weight = sum * 3.85 / 1000
          let num = weight.toFixed(4)
          form.setFieldsValue({total_weight_gd: num})
        }else if(barDiamGd == 28){
          weight = sum * 4.83 / 1000
          let num = weight.toFixed(4)
          form.setFieldsValue({total_weight_gd: num})
        }else if(barDiamGd == 32){
          weight = sum * 6.31 / 1000
          let num = weight.toFixed(4)
          form.setFieldsValue({total_weight_gd: num})
        }else if(barDiamGd == 36){
          weight = sum * 7.99 / 1000
          let num = weight.toFixed(4)
          form.setFieldsValue({total_weight_gd: num})
        }else if(barDiamGd == 40){
          weight = sum * 9.87 / 1000
          let num = weight.toFixed(4)
          form.setFieldsValue({total_weight_gd: num})
        }else{
          message.warning("请输入正确的钢筋直径：6、8、10、12、14、16、18、20、22、25、28、32、36、40");
        }
      }
      return fileValue
    })
  }

  useEffect(() => {
    console.log('props.data',props.data)
    console.log('props.data.productId',props.data.productId)
    //获取设备物模型
    getUnitsList()
    if(props.data?.id){
      // 获取产品id
      setProductId(props.data.productId)
      //获取产品下拉框数据
      apis.workorder.productNopaging({}).then(res => {
        if (res.status === 200) {
          setProductList(res.result);
        }
      })
      // 获取设备下拉框数据
      apis.workorder.instanceNopaging(encodeQueryParam({ terms: {productId: props.data.productId}})).then(res => {
        if (res.status === 200) {
          setInstanceList(res.result);
        }
      })
      setImgId(props.data.imgId)
      setImgUrl(props.data.imgUrl)
      // 获取属性
      apis.deviceInstance.info(props.data.deviceId).then((response: any) => {
        const properties = JSON.parse(response.result.metadata).properties
        var propertyList = []
        var propertyArr = []
        properties.map((item: any, index: number) => {
          console.log('item.id.substr(item.id.length-1,3)', item.id.substr(item.id.length-1,3))
          if(item.id.substr(item.id.length-3,3) == '_gd'){
            propertyList.push(item)
          }
        })
        console.log(properties)
        console.log('propertyList',propertyList)
        let newArr = propertyList.filter(item => item.id == 'raw_material_gd')
        console.log('newArr',newArr)
        if(newArr.length){
          propertyArr = JSON.parse(JSON.stringify(propertyList))
          setIdentification(1)
          // 循环后台返回的物模型
        }else{
          propertyArr = JSON.parse(JSON.stringify(propertyList))
          // propertyList.map((item: any, index: number) => {
          //   if(item.id == 'device_state' || item.id == 'work_order_id' || item.id == 'order_state' || item.id == 'bar_diam_gd' 
          //   || item.id == 'bar_level_gd' || item.id == 'set_num_gd' || item.id == 'finish_num' || item.id == 'total_length_gd' 
          //   || item.id == 'total_weight_gd' || item.id == 'length_single_gd' || item.id == 'weight_gd' || item.id == 'length_middle_gd' 
          //   || item.id == 'angle_lf0_gd' || item.id == 'angle_rt0_gd' || item.id == 'length_lf1_gd' || item.id == 'length_rt1_gd' 
          //   || item.id == 'angle_lf1_gd' || item.id == 'angle_rt1_gd' ){
          //     propertyArr.push(item)
          //   }
          // })
          setSumCount(7)
          setIdentification(0)
        }
        setPropertiesList(propertyList)
        setPropertiesArr(propertyArr)
      })
    }else{
      //获取产品下拉框数据
      apis.workorder.productNopaging({}).then(res => {
        if (res.status === 200) {
          setProductList(res.result);
        }
      })
    }
  }, []);

  const filterText = (value: String) => {
    let text = unitsList.filter(item => item.id == value)
    if(text.length){
      console.log('gusdggasefgtext',text[0].name)
      return text[0].text
    }else{
      return value
    }
  }

  return (
    <Drawer
      visible
      width={900}
      onClose={() => props.close()}
      title={`${props.data?.id ? '修改' : '新建'}工单`}
    >
      <Form form={form} style={{marginBottom: 30}} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
        <Row>
          <Col span={12}>
            <Form.Item key="productId" label="产品">
              {getFieldDecorator('productId', {
                rules: [{ required: true, message: '请选择产品' }],
                initialValue: props.data?.productId ? props.data?.productId : '',
              })(<Select placeholder="选择产品" onChange={handleChangeProduct} disabled={!!props.data.id}>
              {productList.map((item: any) => <Select.Option value={item.id} key={item.id }>{item.name}</Select.Option>)}
              </Select>)}
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item key="deviceId" label="设备">
              {getFieldDecorator('deviceId', {
                rules: [{ required: true, message: '请选择设备' }],
                initialValue: props.data?.deviceId ? props.data?.deviceId : '',
              })(<Select placeholder="选择设备" onChange={handleChange} disabled={!productId || !!props.data.id}>
              {instanceList.map((item: any) => <Select.Option value={item.id} key={item.id }>{item.name}</Select.Option>)}
              </Select>)}
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <Form.Item key="orderName" label="工单名称">
              {getFieldDecorator('orderName', {
               rules: [{ required: true, message: '请输入工单名称' }],
                initialValue: props.data?.orderName ? props.data?.orderName : '',
              })(<Input placeholder="请输入工单名称" disabled={props.data?.id &&  props.data.state !== 0 }/>)}
            </Form.Item>
          </Col>
          {identification == 0 ? <Col span={12}>
            <Form.Item key="imgUrl" label="工单图片">
              <div style={{height: 100, width: 100, marginTop: 10}} onClick={() => { (props.data?.id &&  props.data.state !== 0 ) ? '' : setImgVisible(true);
              }}>
                {imgUrl !== '' ? <img
                  style={{height: 100}}
                  src={imgUrl}
                />: <img
                style={{height: 100, width: 100}}
                src={imgplus}
              />}
              </div>
            </Form.Item>
          </Col> : ''}
        </Row> 
        <Row>
          {propertiesArr.map((item: any, index: number) => 
              <div>
              {/* <div style={{display: 'flex',flexWrap: 'wrap'}} > */}
                <Col span={12}> 
                    <Form.Item key={item.id} label={item.name}>
                        {getFieldDecorator( `${item.id}`, {
                          rules: [{ required: true, message: `请输入${item.name}` }],
                          initialValue:(data?.orderData && data?.orderData[`${item.id}`] !== undefined) ? data?.orderData[`${item.id}`] : 0

                        })(
                            <Input placeholder="请输入整数" style={{width: '75%'}} onBlur={onChangeInput} disabled={props.data?.id &&  props.data.state !== 0 } /> 
                            
                        )}
                        {/* <span>{item.valueType.unit}</span> */}
                        {item.valueType.unit !== undefined ? <span>{filterText(item.valueType.unit)}</span> :''}
                    </Form.Item>
                </Col>
              </div> 
          )}
        </Row>
        {/* 弯曲机并且添加数量小于7 */}
        {(identification == 0 && sumCount < 7) ? <Row>
          <Col span={12} offset={3}>
            <Button type="primary" icon="plus" onClick={()=> {clickPlus(parseInt(sumCount))}}>
              添加
            </Button>
          </Col>
        </Row>: ''}        
        {props.data?.id ? '' : <Row>
          <Col span={12}>
            <Form.Item key="orderName" label="全量覆盖">
                <Switch checked={issue} onChange={onChangeSwitch} />
            </Form.Item>
          </Col>
        </Row>}        
      </Form>
      {props.data?.id ?
      <div
        style={{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
        }}
      >
        <Button
          onClick={() => {
            props.close();
          }}
          style={{ marginRight: 8 }}
        >
          关闭
        </Button>
        <Button
          onClick={() => {
            submitData();
          }}
          type="primary"
        >
          确认
        </Button>
      </div> :
      <div
        style={{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
        }}
      >
        <Button
          onClick={() => {
            props.close();
          }}
          style={{ marginRight: 8 }}
        >
          关闭
        </Button>
        <Button
          onClick={() => {
            submitData();
          }}
          style={{ marginRight: 8 }}
          type="primary"
        >
          创建工单
        </Button>
        <Button
          onClick={() => {
            submitDataSend();
          }}
          type="primary"
        >
          创建并下发
        </Button>
      </div>}
      {imgVisible && (
        <Img
          close={() => {
            setImgVisible(false);
          }}
          save={(item: any[]) => {
            setImgVisible(false);
            imgChange(item);
          }}
        />
      )}
    </Drawer>
  );
};
export default Form.create<Props>()(Save);
